<template>
  <div>
    <base-header text="添加遥控器" isConfirm :isConfirm1="true"></base-header>
    <div style="background: rgba(0, 0, 0,0.2);">
      <div style="overflow: auto;padding: 0.7rem;" :style="{height: height +'px'}" v-if="list.length != 0">
        <div class="top-header" >
          <div class="top-header-div" >
            <div class="icon">
              <img src="../assets/kongtiaoicon.png" alt="">
            </div>
            <div class="text">{{list[0].name + '空调'}}</div>
          </div>
        </div>
        <div style="padding: 0 0.61rem;margin-top: 0.55rem; font-size: 0.38rem;color: #fff; text-align: center">匹配开始，请保持对准空调，如果空调打开，</div>
        <div style="padding:0 2.05remc; margin-top: 0.2rem;margin-bottom: 0.7rem; font-size: 0.38rem;color: #fff; text-align: center">表示匹配成功，点击“完成”</div>
        <div class="div1">{{index + 1}}/{{list.length}}</div>
        <div class="div2" >{{list[index].name + list[index].rmodel}}</div>
        <div class="up" @click="upMatch" @touchstart="touchstart" @touchend="touchend"></div>
        <div class="down" @click="downMatch" @touchstart="touchstart1" @touchend="touchend1"></div>
        <div style="text-align: center;font-size: 0.4rem; color:#fff;">长按，可以逐个连续匹配</div>
        <div class="btn" @click="commit">完成</div>
      </div>
    </div>
  </div>
</template>

<script>
  import BaseHeader from "../components/BaseHeader.vue";

  export default {
    components: {BaseHeader},
    data() {
      return {
        height: window.innerHeight - (362*(window.innerWidth/1080)),  
        
        list: [
         {
           name: '大金',
           rmodel: 'KR108'
         },
         {
           name: '大金1',
           rmodel: 'KR108'
         },
         {
           name: '大金',
           rmodel: 'KR108'
         },
         {
           name: '大金',
           rmodel: 'KR108'
         },
         {
           name: '大金',
           rmodel: 'KR108'
         },
         {
           name: '大金',
           rmodel: 'KR108'
         },
         {
           name: '大金',
           rmodel: 'KR108'
         },
         {
           name: '大金',
           rmodel: 'KR108'
         },
         {
           name: '大金',
           rmodel: 'KR108'
         },
         {
           name: '大金',
           rmodel: 'KR108'
         }
        ],
        index: 0,
        setTimeoutFlag: '',
        setIntervalFlag: ''
      }
    },
    created(){
      window.matchList = this.matchList;
    },
    mounted() {
    let left = (this.index+1)/(this.list.length)*100;
     $('.div1').css({'background': 'linear-gradient(to right,#54aeb7 ' +left + '%,'+ '#014b54 ' +(1-left)+'%)'})
     $('.div1').css({'background': '-webkit-linear-gradient(to right,#54aeb7 ' +left + '%,'+ '#014b54 1px' })
     $('.div1').css({'background': '-o-linear-gradient(to right,#54aeb7 ' +left + '%,'+ '#014b54 1px' })
     $('.div1').css({'background': '-moz-linear-gradient(to right,#54aeb7 ' +left + '%,'+ '#014b54 1px' })
      let str = this.$route.query.id;
      if (localStorage.getItem('from') === 'android') {
        window.android.getMatchList(str)
      } else if (localStorage.getItem('from') === 'ios') {
        window.webkit.messageHandlers.getMatchList.postMessage(str)
      }
    },
    updated(){
      let left = (this.index+1)/(this.list.length)*100;
     $('.div1').css({'background': 'linear-gradient(to right,#54aeb7 ' +left + '%,'+ '#014b54 1px' })
     $('.div1').css({'background': '-webkit-linear-gradient(to right,#54aeb7 ' +left + '%,'+ '#014b54 1px' })
     $('.div1').css({'background': '-o-linear-gradient(to right,#54aeb7 ' +left + '%,'+ '#014b54 1px' })
     $('.div1').css({'background': '-moz-linear-gradient(to right,#54aeb7 ' +left + '%,'+ '#014b54 1px' })
      
    },

    methods:{
      
      matchList(v){
        this.list = v.matchList;
        let str = JSON.stringify(v.matchList[0].matchKeys[0]);
        if (localStorage.getItem('from') === 'android') {
          window.android.oneKeyMatch(str)
        } else if (localStorage.getItem('from') === 'ios') {
          window.webkit.messageHandlers.oneKeyMatch.postMessage(str)
        }
      },
      //增加数字
      upMatch(){
        if(this.index < this.list.length - 1){
          this.index = this.index + 1;
          let str = JSON.stringify(this.list[this.index].matchKeys[0]);
          if (localStorage.getItem('from') === 'android') {
            window.android.oneKeyMatch(str)
          } else if (localStorage.getItem('from') === 'ios') {
            window.webkit.messageHandlers.oneKeyMatch.postMessage(str)
          }
        }
      },
      //减少数字
      downMatch(){
        if(this.index > 0){
          this.index = this.index - 1;
          let str = JSON.stringify(this.list[this.index].matchKeys[0]);
          if (localStorage.getItem('from') === 'android') {
            window.android.oneKeyMatch(str)
          } else if (localStorage.getItem('from') === 'ios') {
            window.webkit.messageHandlers.oneKeyMatch.postMessage(str)
          }
        }
      },
      touchstart(){
        let self = this;
        this.setTimeoutFlag = setTimeout(function () {
          self.setIntervalFlag = setInterval(function () {
            self.upMatch()
          },1000)
        },1000)
      },
      touchend(){
        clearTimeout(this.setTimeoutFlag);
        clearInterval(this.setIntervalFlag)
      },
      touchstart1(){
        let self = this;
        this.setTimeoutFlag = setTimeout(function () {
          self.setIntervalFlag = setInterval(function () {
            self.downMatch()
          },1000)
        },1000)
      },
      touchend1(){
        clearTimeout(this.setTimeoutFlag);
        clearInterval(this.setIntervalFlag)
      },
      //完成按钮
      commit(){
        let str = this.list[this.index].rid;
        if (localStorage.getItem('from') === 'android') {
          window.android.fetchRemoteDeivce(str)
        } else if (localStorage.getItem('from') === 'ios') {
          window.webkit.messageHandlers.fetchRemoteDeivce.postMessage(str)
        }

        // let sta = this.$route.query.id + ',' + this.list[index].rmodel;

        this.$router.push({name: 'TelecontrollerSetting'})
      }
    }
 
  }
</script>

<style scoped>
  .div2{
    margin: 0.8rem 1.9rem 0.95rem 1.95rem;
    background : #c3e2e5;
     color: #2a838b;
     line-height:0.88rem; 
     height: 0.88rem; 
     text-align: center;
     font-size: 0.37rem;
  }
  .div1{
    transition: all 1s;
    height: 1.14rem;
    line-height: 40px;
    border: 1px solid #fff;
    border-radius: 30px;
    margin:0 0.5rem;
    color: #fff;
    text-align: center;
    font-size: 0.6rem;
  }
  .top-header{
    height: 0.9rem;
    text-align: center;
    display: flex;
    justify-content: space-around;
    padding-bottom:0.32rem;
    background: url(../assets/duanxixian.png) no-repeat 0 1.15rem;
    background-size:100% 1px ;
    
  }
  .top-header .top-header-div{
    width: 4.6rem;
    text-align: center;
    display: flex;
    justify-content: space-between;
    height: 0.87rem;
  }
  .top-header .top-header-div .icon{
    display: block;
    width: 2.3rem;  
    text-align: left;
  }
   .top-header .top-header-div .icon img{
     width: 100%;
     height: 100%;
     float: left;
   }
  .top-header .top-header-div .text{
    font-size: 16px;
    display: block;
    color: #fff;
    line-height: 1.2rem;
   
    
  }
  .up{
    margin: 0 auto;
    position: relative;
    width: 2.04rem;
    height: 1.44rem;
    background: pink;
    background: url(../assets/shangjiantou.png)no-repeat;
    background-size:100% 100%; 
    
  }
  .down{
    margin: 0.9rem auto 0.85rem auto;
    width: 2.04rem;
    height: 1.44rem;
    background: pink;
    background: url(../assets/xiajiantou.png)no-repeat;
    background-size:100% 100%; 
  }
  .btn{
    margin: 1.05rem auto 0 auto;
    text-align: center;
    line-height: 1.24rem;
    width: 3.71rem;
    height: 1.24rem;
    font-size: 0.6rem;
    color: #006569;
    background: url(../assets/完成圆角icon.png)no-repeat;
    background-size:100% 100%;
    -webkit-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none;
    user-select:none;
  }
  .btn:active{
    background-color: #eeeeee;
  }
</style>

